<template>
    <view class="container">
        <view class="action-bar u-flex u-row-between u-col-center" @click="$u.$MRouter.forgetPassword.to()">
            <view class="action-name">登录密码</view>
            <view class="u-flex u-col-center">
                <view class="action-status u-margin-right-20">修改</view>
                <text class="icon icon-right"></text>
            </view>
        </view>
        <view class="action-bar u-flex u-row-between u-col-center" @click="remove">
            <view class="action-name">清除缓存</view>
            <view class="u-flex u-col-center">
                <view class="action-status u-margin-right-20">{{ localSize }} </view>
            </view>
        </view>
        <view class="action-bar u-flex u-row-between u-col-center" @click="writeOff">
            <view class="action-name">账号注销</view>
            <view class="u-flex u-col-center">
                <text class="icon icon-right"></text>
            </view>
        </view>
        <view class="login-out" @click="loginout">退出登录</view>
        <u-modal v-model="showModal" content="是否确认清除图片缓存?" title="" @confirm="confirm" show-cancel-button></u-modal>
    </view>
</template>

<script lang="ts" setup>
import { getDirSize, removeDir, formatSize } from '@/components/img-cache/index.js'
import { computed, onMounted, ref } from 'vue'
import { useUserStore } from '@/store'

const showModal = ref(false)

const localSize = ref(0)

const userStore = useUserStore()

const $u = computed(() => {
    return uni.$u
})

const remove = () => {
    showModal.value = true
    // 清除sql数据
    // #ifdef APP-PLUS
    uni.$u.$imHandler.img.delete()
    // #endif
}
const writeOff = () => {
    uni.$u.$MRouter.writeOff.to()
}
const loginout = () => {
    // 清空 缓存操作
    userStore.LogOut().then(() => {
        // 跳转到登录页面
        // #ifdef H5
        console.log('%c退出登录,重置所有页面数据', 'background-color:red;color:white;border-radius:4px;padding:6px')
        // #endif
        uni.$u.$MRouter.login.to()
    })
}
const confirm = () => {
    removeDir('_doc/imgcache/').then(()=>{
        localSize.value = 0
        uni.removeStorage({
            key:'imgcache'
        })
        uni.showToast({
            title:'清除完成!',
        })
    })
}

onMounted(async()=>{
    // 读取缓存文件夹 缓存容量
    localSize.value = formatSize(await getDirSize('_doc/imgcache/'))
})

</script>

<style scoped lang="scss">
.container {
    height: 100vh;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
}

.action-bar {
    height: 44px;
    background-color: $uni-bg-color;
    padding: 30rpx;
    margin-bottom: 2rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
}

.login-out {
    margin-top: 20rpx;
    background: $cf-primary;
    border-radius: 10rpx;
    text-align: center;
    font-size: 30rpx;
    height: 44px;
    line-height: 44px;
    color: white;
    position: fixed;
    width: calc(100% - 60rpx);
    bottom: 50rpx;
}
</style>
